.button {
  background-color: rgb(255, 255, 255);
  border-color: rgb(209, 213, 219);
  border-width: 1px;
  border-radius: 0.375rem;
  border-style: solid;
  color: rgb(55, 65, 81);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.container {
  border: 1px solid rgba(128, 128, 128, 0.35);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  font-family: sans-serif;
  height: 80vh;
  overflow: scroll;
  resize: both;
  width: 80vw;
}

.customPane {
  background-color: red;
  overflow: scroll;
}

.customPaneContent {
  align-items: center;
  background: rgb(30, 30, 30);
  color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 200px;
  background: rgb(222, 222, 222);
  color: rgb(30, 30, 30);
  overflow: visible;
}

/* Styles for VisibleWithAnimation demo */
.leftPane,
.rightPane {
  transition: all 0.15s ease-in-out;
  will-change: width;
}
.splitViewContainer:global(.split-view-sash-dragging) .leftPane,
.splitViewContainer:global(.split-view-sash-dragging) .rightPane {
  /* disable animation while sash dragging */
  transition: none;
}
